{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Automation</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/zTreeStyle.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/index.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/shCore.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/shThemeDefault.css' %}" type="text/css"> {% comment %}
    <link rel="stylesheet" href="{% static 'css/shThemeDjango.css' %}" type="text/css">{% endcomment %}

    <script type="text/javascript" src="{% static 'js/jquery-3.1.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-select.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.ztree.core.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.ztree.excheck.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/XRegExp.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/shCore.js' %}"></script>
    {% comment %}
    <script type="text/javascript" src="{% static 'js/shLegacy.js' %}"></script>{% endcomment %}
    <script type="text/javascript" src="{% static 'js/shBrushPython.js' %}"></script>

    <script language="JavaScript">
        var zTreeObj;
        var setting = {
            async: {
                enable: true,
                url: getUrl
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: onCheck,
                onClick: onClick
            }
        };

        var zNodes = {{ json_data | safe }};

        $(document).ready(function() {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        function onCheck(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var checkedNodes = treeObj.getCheckedNodes(true);
            var v = "";
            for (var i = 0; i < checkedNodes.length; i++) {
                if (checkedNodes[i].isParent !== true) {
                    v += checkedNodes[i].id + ";";
                }
            }
            $("#selected_cases").attr("value", v);
            console.log(v);
        }

        function onClick(event, treeId, treeNode) {
            console.log(treeNode.id);
            console.log('{% url "autocases:show_case" %}' + "?caseId=" + treeNode.id);
            $.get("{% url 'autocases:show_case' %}" + "?caseId=" + treeNode.id, function(ret) {
                $("#cases").css('display', 'block');
                // $("#cases").html(ret);

                // 设置语法高亮
                var brush = new SyntaxHighlighter.brushes.Python(),
                    html;
                brush.init({
                    toolbar: false,
                    gutter: false
                }); // gutter 控制是否显示行号
                html = brush.getHtml(ret);
                document.getElementById('cases').innerHTML = html;
            })
        }

        function getUrl(treeId, treeNode) {
            console.log(treeNode.id);
            return "{% url 'autocases:getChildNodes' %}" + "?pId=" + treeNode.id;
        }
    </script>

</head>

<body>

    <!-- 返回顶部的锚点 -->
    <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>

    <div id='left'>
        <!-- 左上侧区域, 用于展示下拉选项框 -->
        <form action="{% url 'autocases:selectedNodes' %}" method="post" class='form-horizontal' onsubmit="return validate_form(this)">
            <input type="hidden" name="selected_cases" id="selected_cases" />
            <div class="form-group">
                <label for='jenkins' class='col-sm-2 control-label' style="text-align: left">Jenkins: </label>
                <!-- Jenkins dropdown select -->
                <div class="col-sm-10">
                    <select name="jenkins" id="jenkins" class="selectpicker" data-live-search="true"></select>
                </div>
            </div>
            <div class="form-group">
                <label for='jobName' class='col-sm-2 control-label' style="text-align: left">JobName: </label>
                <!-- JobName dropdown select -->
                <div class="col-sm-10">
                    <select name="jobName" id="jobName" class="selectpicker" data-live-search="true"></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" value="提交" class="btn btn-default" />
                </div>
            </div>
        </form>

        <!-- 模态窗口, 用于出错提示 -->
        <div id="mymodal" class="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" type="button" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" style="color: red">Warning</h4>
                    </div>
                    <div class="modal-body">
                        <p id="info_content"></p>
                    </div>
                    <!--
                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                    </div>
                    -->
                </div>
            </div>
        </div>

        <!-- 左下侧区域, 用于展示数结构 -->
        <div class='myTree'>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>


    <!-- 右侧区域, 用于展示脚本内容-->
    <div id='right'>
        <div class="testcase">
            <!-- <textarea id="cases" name='testcase'class="brush: js"></textarea> -->
            <pre class="brush: python;" id="cases" name="cases" style="display: none"></pre>
        </div>
    </div>


    <!-- 动态填充下拉列表框 -->
    <script type="text/javascript">
        var jenkins = {{ jenkins|safe }};
        var jobs = {{ jobs|safe }};

        $("#jenkins").empty()
        for (var i = 0; i < jenkins.length; i++) {
            $("#jenkins").append("<option value='" + jenkins[i] + "'>" + jenkins[i] + "</option>");
        }

        $("#jobName").empty()
        for (var i = 0; i < jobs.length; i++) {
            $("#jobName").append("<option value='" + jobs[i] + "'>" + jobs[i] + "</option>");
        }
    </script>


    <script type="text/javascript">
        $(document).ready(function() {
            $("#jenkins").change(function() {
                var $jenkins_hostname = $("#jenkins").val();
                console.log($jenkins_hostname);
                $.get("{% url 'autocases:get_jobs_from_jenkins_and_return' %}" + "?hostname=" + $jenkins_hostname,
                    function(response, status, xhr) {
                        console.log(response);
                        var myJob = response.split("&");
                        $("#jobName").empty();
                        for (var i = 0; i < myJob.length; i++) {
                            $("#jobName").append("<option value='" + myJob[i] + "'>" + myJob[i] + "</option>");
                        }
                        $(".selectpicker").selectpicker('refresh');
                    })
            })
        })
    </script>


    <!-- 验证表单提交 -->
    <script type="text/javascript">
        function validate_required(field, alerttxt) {
            with(field) {
                if (value == null || value == "") {
                    $('#info_content').html(alerttxt);
                    $('#mymodal').modal("toggle");
                    return false
                } else {
                    return true
                }
            }
        }

        function validate_form(thisform) {
            with(thisform) {
                if (validate_required(jobName, "Must select jobName!") == false) {
                    // jobName.focus();
                    return false
                }
                if (validate_required(selected_cases, "好歹也得选择一个case吧!") == false) {
                    return false
                }
            }
        }
    </script>

    <!-- 实现返回顶部功能 -->
    <script type="text/javascript">
        $(document).ready(function() {
            //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 
            $(window).scroll(function() {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1000);
                } else {
                    $("#back-to-top").fadeOut(1000);
                }
            });

            //当点击跳转链接后，回到页面顶部位置 
            $("#back-to-top").click(function() {
                $('body,html').animate({
                    scrollTop: 0
                }, 500);
                return false;
            });
        });
    </script>

</body>

</html>